<template>
 <div>
   <el-upload
     class="upload-demo"
     ref="upload"
     :action=uploadUrl
     :data="data"
     :on-preview="handlePreview"
     :on-progress="handleProgress"
     :on-exceed="handleExceed"
     :file-list="fileList"
     :on-success="handleSuccess"
     accept=".xls,.xlsx"
     :limit="1"
     :before-upload="beforeFileUpload"
     :auto-upload="true">
     <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
     <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
   </el-upload>
    <div v-if="err">
      <hr color="#f2f2f2" style="margin: 20px 0px 30px;">
       <div>错误详情</div>
      <ul><li style="color: red" v-for="item in errs">{{item}}</li></ul>
    </div>
 </div>
</template>


<script>
  import {CONFIG} from '@/config/env'
//  credentials = true
  let API=CONFIG.PROJECT.API;
  export default {
    data() {
      return {
        uploadUrl: `${API.URL}/${API.APPNAME}/supplies/excel`,
        fileList: [],
        percent:0,
        err:false,
        errs:[]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件,请删除后重新上传`);
      },
      handleProgress(file) {
        console.log('pro',file);
        this.percent=file.percent
      },
      handlePreview(file) {
        console.log('pre',file);
      },
      handleSuccess(res){
        if(res.result=='ok'){
          this.$message.success(`上传成功,刷新页面中`);
          this.$emit('uploadSuccess')
          this.fileList=[];
          this.err=false;

        }else {
          this.$message.warning(res.message);
          this.errs=res.details;
          this.err=true;
          this.fileList=[];


        }
      },
      beforeFileUpload(file){
//        const isExcel = file.type === 'file/xl';
//
//        if (!isExcel) {
//          this.$message.error('上传头像图片只能是 JPG 格式!');
//        }
      }
    }
  }
</script>
